<template>
    <div class="playlist">
        <h3>官方歌单</h3>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
            <li v-for="item in playListData" :key="item.content_id" @click="selectPlayList(item)">
                <div class="cover">
                    <img :src="item.cover" alt="">
                    <span>{{(item.listen_num/1000) | numFileter(1)}}万</span>
                </div>
                
                <span>{{item.title}}</span>
            </li>
        </ul>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import BSroll from 'better-scroll'
export default {
    data(){
        return{
            playListData: []
        }
    },
    methods: {
        getPlayList(){
            axios.get("/api/recommend/playlist/u")
            .then(res => {
                // console.log(res)
                console.log(res.data.data.list)
                this.playListData = res.data.data.list;
                this.betterScrollHorizontal(this.playListData.length,160)
            })
            .catch(err => {
                console.error(err); 
            })
        },
        betterScrollHorizontal(num,itemWidth){
            let width = num * itemWidth;
            this.$refs.content.style.width = width + "px";
            this.$nextTick(()=>{
                this.scroll = new BSroll(this.$refs.wrapper,{
                    scrollX: true,
                    scrollY: false,
                    startX: 0,
                    click: true
                })
            })
        },
        selectPlayList(item){
            const id = item.content_id
            this.$router.push({
                name: 'PlayListDetail',
                params: {id:id}
            })
            // this.$router.push({ path: `/playlistdetail/${id}` })
        }
    },
    mounted(){
        this.getPlayList()
    },
    filters:{
        numFileter(value,num){
            return parseFloat(value).toFixed(num);
        }
    }
}
</script>
<style scoped>
    .playlist{
        width: 90%;
        margin: 0 auto;
    }
    .playlist>h3{
        text-align: left;
    }
    .wrapper{
        overflow: hidden;
    }
    ul.content>li{
        display: inline-block;
        width: 160px;
        vertical-align: top;
    }
    ul.content>li img{
        width: 90%;
        border-radius: 20px;
    }
    .cover{
        position: relative;
    }
    .cover>span{
        background-color: gray;
        position: absolute;
        right: 10px;
        bottom: 5px;
        border-radius: 20px;
        width: 100px;
    }
    ul.content>li>span{
        font-size: 12px;
        display: inline-block;
        width: 90%;
    }
</style>